<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue之路由导航案例</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <style>
        .content {
            width: 800px;
            text-align: center;
            margin: 0 auto;
            margin-top: 30px;
        }

        .header {
            text-align: center;
            font-weight: 700;
            font-size: 18px;
            color: white;
            background-color: rgba(15, 1, 3, 0.726);
        }

        .footer {
            text-align: center;
            color: white;
            font-size: 16px;
            background-color: gray;
        }

        .left {
            width: 150px;
            height: 100%;
            background-color: rgba(15, 1, 3, 0.726);
            float: left;
        }

        .right {
            float: left;
            height: 100%;
            width: 643px;
            text-align: center;
        }

        .right table {
            border-collapse: collapse;
            margin-left: 5px;
            width: 645px;
        }

        .right table thead th {
            border: 2px solid gray;
        }

        .right table tbody td {
            border: 2px solid gray;
        }

        .right table thead {
            background-color: gray;
        }

        .left ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            width: 100%;
        }

        .left ul li {
            width: 100%;
            height: 35px;
            line-height: 35px;
            font-size: 16px;
            text-align: center;
            background-color: gray;
            color: white;
            border-bottom: 2px solid white;
        }

        .main {

            width: 100%;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="app" class="content">

        <!-- 路由占位标志 -->
        <router-view></router-view>
    </div>
    <script>

        var User = {
            data: function () {
                // 用户展示页面提供数据
                return {
                    list: [{
                        id: 1,
                        name: '张三',
                        age: 18
                    },
                    {
                        id: 2,
                        name: '李四',
                        age: 22
                    },
                    {
                        id: 3,
                        name: '王五',
                        age: 20
                    },
                    {
                        id: 4,
                        name: '赵六',
                        age: 19
                    }]

                }
            },
            template: `
                <!-- 右边内容展示区 -->
                        <div>
                            <h3>用户管理区域</h3>
                            <table>
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>姓名</th>
                                        <th>年龄</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for='item in list' :key='item.id'>
                                        <td>{{item.id}}</td>
                                        <td>{{item.name}}</td>
                                        <td>{{item.age}}</td>
                                        <td>
                                            <a href="javascript:;" @click='handle(item.id)'>详情</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>`,
            methods: {
                handle: function (id) {
                    // 点击跳转到详情页面 并且携带id值
                    console.log('点击id的值是' + id);
                    this.$router.push('/detail/:' + id)
                }
            }
        }

        var Detail = {
            data: function () {
                return {}
            },
            template: `
            <div>
              <h3>详情页面 ------ 携带的id值是: {{this.$route.params.id}}</h3>
              <button @click='back'>返回原路由</button>
            </div>
            `,
            methods: {
                back: function () {
                    // 编程式路由返回
                    this.$router.go(-1)
                }
            }
        }

        var Right = {
            data: function () {
                return {}
            },
            template: `
            <div>
              <h3>权限管理区</h3>    
            </div>
            `
        }

        var Good = {
            data: function () {
                return {}
            },
            template: `
            <div>
              <h3>商品管理</h3>    
            </div>
            `
        }

        var Order = {
            data: function () {
                return {}
            },
            template: `
            <div>
              <h3>订单管理</h3>    
            </div>
            `
        }

        var Setting = {
            data: function () {
                return {}
            },
            template: `
            <div>
              <h3>系统设置</h3>    
            </div>
            `
        }

        var App = {
            data: function () {
                return {
                }
            },
            template: `
            <div>  
            <!-- 头部区域 -->
                <header class="header">传智后台管理系统</header>

                <!-- 中间主体区域 -->
                <div class="main">

                    <!-- 左边导航栏 -->
                    <div class="left">
                        <ul>
                            <li><router-link to="/user">用户管理</router-link></li>
                            <li><router-link to="/right">权限管理</router-link></li>
                            <li><router-link to="/goods">商品管理</router-link></li>
                            <li><router-link to="/order">订单管理</router-link></li>
                            <li><router-link to="/setting">系统设置</router-link></li>
                        </ul>
                    </div>
                    <div class="right">
                        <!-- 路由占位标志 -->
                        <router-view></router-view>
                    </div>
                </div>
                <!-- 底部区域 -->
                <footer class="footer">版权信息</footer>
            </div>`
        }

        var router = new VueRouter({
            routes: [
                // 重定向到user界面
                { path: '/', redirect: '/user' },
                {
                    path: '/', component: App,
                    children: [
                        { path: '/user', component: User },
                        { path: '/right', component: Right },
                        { path: '/goods', component: Good },
                        { path: '/order', component: Order },
                        { path: '/setting', component: Setting },
                        { path: '/detail/:id', component: Detail }
                    ]
                }]
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            router: router,
            methods: {
            },
        })
    </script>
</body>

</html>


<!-- 防止a链接跳转的默认行为 可以禁用标签默认动作或者设置链接地址为javascript:; -->

<!-- 1. 抽离并渲染App根组件 -->
<!-- 2. 将左侧菜单改造成路由链接 -->
<!-- 3.创建左侧路由链接的路由占位符 -->
<!-- 4.制定子路由添加规则 -->
<!-- 5.绘制用户列表界面 -->
<!-- 6.路由重定向规则制定 -->
<!-- 7.编程式导航路由到详情页 -->
<!-- 8.编程式导航到返回路由界面 -->